<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>帖子管理</el-breadcrumb-item>
            <el-breadcrumb-item>主题列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区 -->
        <el-card>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true">添加主题</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <el-table :data="themeList" border stripe> 
                <el-table-column type="index"></el-table-column>
                <el-table-column label="主题名" prop="themeName"></el-table-column>
                <el-table-column label="是否有效" prop="isDelete" >
                  <template slot-scope="scope" >
                      <p v-if="scope.row.isDelete === 0">不可用</p>
                      <p v-if="scope.row.isDelete === 1">可用</p>
                  </template>
                </el-table-column>

                <!-- 自定义操作 -->
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope" >
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.themeId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <!-- 添加用户的对话框 -->
                <el-dialog
                title="添加用户"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClosed">
                    <!-- 内容主体区域 -->
                    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
                        <el-form-item label="主题名" prop="themeName">
                            <el-input v-model="addForm.themeName"></el-input>
                        </el-form-item>
                    </el-form>
                    <!-- 底部区域 -->
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addTag">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 修改用户对话框 -->
                <el-dialog
                    title="修改用户"
                    :visible.sync="editDialogVisible"
                    width="50%"
                    @close="editDialogClosed"
                    >
                    <el-form :model="editFrom" :rules="editFromRules" ref="editFromRef" label-width="70px" >
                        <el-form-item label="主题ID">
                            <el-input v-model="editFrom.themeId" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="主题名" prop="themeName">
                            <el-input v-model="editFrom.themeName"></el-input>
                        </el-form-item>
                        <el-form-item label="是否可用：" prop="isDelete" label-width="100px">
                              <template>
                                <el-radio-group v-model="editFrom.isDelete">
                                  <el-radio :label="1" >可用</el-radio>
                                  <el-radio :label="0" >不可用</el-radio>
                                </el-radio-group>
                              </template>
                        </el-form-item>
                    </el-form>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="editTagInfo">确 定</el-button>
                      </span>
                </el-dialog>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
      return {
          //获取列表的参数对象
          queryInfo: {
              query: '',
              //当前页数
              pagenum: 1,
              //当前每页显示多少数据
              pagesize: 10
          },
          themeList: [],
          total: 0,
          //添加用户对话框的显示与隐藏
          addDialogVisible: false,
          //添加用户的表单数据对象
          addForm: {
              themeName: ''
          },
          //添加用户表单验证规则对象
          addFormRules: {
              themeName: [
                  { required: true, message: '请输入主题名', trigger: 'blur'}
              ]
          },
          editDialogVisible: false,
          //查询到的用户信息对象
          editFrom: {
          },
          editFromRules: {
              themeName: [
                  { required: true, message: '请输入主题名', trigger: 'blur'}
              ]
          }
      }   
    },
    created() {
        this.getTagList()
    },
    methods: {
        async getTagList() {
            const {data : res} = await this.$http.post('/api/post/getAllTheme',this.queryInfo)
            if(res.code !==200) {
                return this.$message.error('获取列表失败！')
            }
            this.themeList = res.data.records
            this.total = res.data.total
            console.log(res)    
        },
        //监听pagesize改变event
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getTagList()
        },
        //监听页码值改变事件
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getTagList()
        },
        //监听添加用户对话框的关闭时间
        addDialogClosed() {
            this.$refs.addFormRef.resetFields()
        },
        //点击按钮添加新用户
        addTag() {
            this.$refs.addFormRef.validate(async valid =>{
                if (!valid) return
                //发起添加主题请求
                const {data: res} = await this.$http.put('/api/post/addTheme',this.addForm)
                if(res.code !==200) { return this.$message.error(res.msg)}
                this.$message.success(res.msg)
                this.addDialogVisible = false
                //重新获取用户列表数据
                this.getTagList()
            })
        },
        //修改用户信息
        async showEditDialog(id) {
            const {data: res} = await this.$http.post('/api/post/getOneTheme', { themeId:id})
            if (res.code !==200) {
                return this.$message.error('查询主题列表数据失败')
            }
            this.editFrom = res.data
            this.editDialogVisible = true
        },
        //监听用户修改对话框的关闭时间
        editDialogClosed() {
            this.$refs.editFromRef.resetFields()
        },
        //修改用户信息并提交
        editTagInfo() {
            this.$refs.editFromRef.validate(async valid =>{
                if (!valid) {
                    return
                }
                //发起表单修改
                const {data: res} = await this.$http.put('/api/post/updateTheme',this.editFrom)
                if (res.code !== 200) {
                    return this.$message.error(res.msg)
                }
                //关闭对话框
                this.editDialogVisible = false
                //刷新数据列表
                this.getTagList()
                //提示修改成功
                return this.$message.success(res.msg)
            })
        }
    }
}
</script>

<style lang="less" scoped>

</style>